/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useEffect } from 'react';
import styles from './index.module.less';
import ListItem, { Item } from '@/components/list-item';
import { useDispatch, useSelector } from 'react-redux';

enum InfoType {
  BASE = 'BASE',
  ORG = 'ORG',
  OTHER = 'OTHER'
}

const PersonalInfo: React.FC<any> = () => {
  const { userInfo = {} } = useSelector((state: any) => ({
    userInfo: state.common.userInfo
  }));
  const dispatch = useDispatch();

  console.log("userInfo:",userInfo);
  useEffect(() => {
    dispatch({ type: 'common/getUserInfoSaga' });
  }, []);

  const getTableData = (type: InfoType) => {
    let data: Array<Item> = [];

    switch (type) {
      case InfoType.BASE:
        data = [
          { label: '姓名', value: userInfo?.userName }
        ];
        break;
      case InfoType.ORG:
        data = [
          { label: '编号', value: userInfo?.userCode },
          { label: '部门', value: userInfo?.orgName },
          { label: '岗位', value: userInfo?.postName },
          { label: '角色', value: userInfo?.roleName }
        ];
        break;
      case InfoType.OTHER:
        data = [
          { label: '手机号', value: userInfo?.mobile },
        ];
        break;
      default: break;
    }
    return data;
  };

  return (
    <div className={styles.wrap}>
      <ListItem data={getTableData(InfoType.BASE)} />
      <ListItem data={getTableData(InfoType.ORG)} />
      <ListItem data={getTableData(InfoType.OTHER)} />
    </div>
  );
};

export default PersonalInfo;